<template>
  <div class="outer" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
    <div class="outer_one">
      <!-- 左 -->
      <div :style="{
          top: this.$store.state.system.isFullScreen ? '38%' : '36%',
          left: this.$store.state.system.isFullScreen ? '18%' : '17.5%',
        }">
        <div>报警</div>
        <div>{{ BaoJing }}</div>
      </div>
      <!-- 上 -->
      <div :style="{
          top: this.$store.state.system.isFullScreen ? '9%' : '8%',
          left: this.$store.state.system.isFullScreen ? '45%' : '44.5%',
        }">
        <div>正常</div>
        <div>{{ ZhenChhang }}</div>
      </div>
      <!-- 右-->
      <div :style="{
          top: this.$store.state.system.isFullScreen ? '38%' : '37%',
          right: this.$store.state.system.isFullScreen ? '18%' : '17%',
        }">
        <div>预警</div>
        <div>{{ YuJing }}</div>
      </div>
      <!-- 下-->
      <div :style="{
          left: this.$store.state.system.isFullScreen ? '45%' : '44.5%',
          bottom: this.$store.state.system.isFullScreen ? '8%' : '6%',
        }">
        <div>断开</div>
        <div>{{ DuanKai }}</div>
      </div>
      <!-- 中间-->
      <div :style="{
          left: this.$store.state.system.isFullScreen ? '43%' : '43%',
          bottom: this.$store.state.system.isFullScreen ? '38%' : '37%',
          width: this.$store.state.system.isFullScreen ? '60px' : '50px',
          height: this.$store.state.system.isFullScreen ? '60px' : '50px',
        }">
        <div>传感器总数</div>
        <div>{{ ZongShu }}</div>
      </div>
    </div>
    <div class="outer_two">
      <div v-for="(item, index) in list" :key="index">
        <div>{{ item.Name }}</div>
        <div>---------</div>
        <div>正常:{{ item.zc }}</div>
        <div>异常:{{ item.yc }}</div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { ShouYeChuanGanQicount } from "../../https/api/user";
export default {
  data() {
    return {
      ZongShu: "",
      ZhenChhang: "",
      BaoJing: "",
      YuJing: "",
      DuanKai: "",
      list: [
       
      ],
      time: "",
    };
  },
  mounted() {
    this.OnList();
    this.time = setInterval(() => {
      this.OnList();
    }, 5000);
  },
  methods: {
    OnList() {
      const data = {
        e: 1,
      };
      ShouYeChuanGanQicount(data).then((res) => {
        // console.log("首页传感器状态-正常-报警-异常-断开", res);
       
        if (res) {
          this.list = res[0].DBS
          this.ZongShu = res[0].Sencounts[0].zs;
          this.ZhenChhang = res[0].Sencounts[0].zszc;
          this.BaoJing = res[0].Sencounts[0].zsbj;
          this.YuJing = res[0].Sencounts[0].zsyj;
          this.DuanKai = res[0].Sencounts[0].zslx;
        }
      });
    },
    handleMouseEnter() {
      clearInterval(this.time);
    },
    handleMouseLeave() {
      this.time = setInterval(() => {
        this.OnList();
      }, 1000);
    },
    },
    beforeDestroy() {
      clearInterval(this.time);
    },
};
</script>
  
  <style lang="less" scoped>
.outer {
  width: 100%;
  height: 100%;
  .outer_one {
    width: 98%;
    height: 50%;
    margin: 0 auto;
    background-image: url("../..//assets/HomePageChuanGuanQiXinXi.png");
    background-size: 80% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgb(13, 50, 88);
    position: relative;
    > div:nth-child(1) {
      width: 40px;
      height: 40px;
      // border: 1px solid red;
      position: absolute;
      > div:nth-child(1) {
        width: 100%;
        height: 50%;
        color: white;
        font-size: 13px;
        line-height: 20px;
        text-align: center;
      }
      > div:nth-child(2) {
        font-size: 14px;
        width: 100%;
        height: 50%;
        color: red;
        text-align: center;
      }
    }
    > div:nth-child(2) {
      width: 40px;
      height: 40px;
      // border: 1px solid red;
      position: absolute;
      > div:nth-child(1) {
        width: 100%;
        height: 50%;
        color: white;
        font-size: 13px;
        line-height: 20px;
        text-align: center;
      }
      > div:nth-child(2) {
        font-size: 14px;
        width: 100%;
        height: 50%;
        color: rgb(78, 151, 217);
        text-align: center;
      }
    }
    > div:nth-child(3) {
      width: 40px;
      height: 40px;
      // border: 1px solid red;
      position: absolute;
      > div:nth-child(1) {
        width: 100%;
        height: 50%;
        color: white;
        font-size: 13px;
        line-height: 20px;
        text-align: center;
      }
      > div:nth-child(2) {
        font-size: 14px;
        width: 100%;
        height: 50%;
        color: darkmagenta;
        text-align: center;
      }
    }
    > div:nth-child(4) {
      width: 40px;
      height: 40px;
      // border: 1px solid red;
      position: absolute;
      > div:nth-child(1) {
        width: 100%;
        height: 50%;
        color: white;
        font-size: 13px;
        line-height: 20px;
        text-align: center;
      }
      > div:nth-child(2) {
        font-size: 14px;
        width: 100%;
        height: 50%;
        color: yellow;
        text-align: center;
      }
    }
    > div:nth-child(5) {
      width: 50px;
      height: 50px;
      // border: 1px solid red;
      position: absolute;
      > div:nth-child(1) {
        width: 100%;
        height: 50%;
        color: white;
        font-size: 9px;
        line-height: 20px;
      }
      > div:nth-child(2) {
        font-size: 20px;
        width: 100%;
        height: 50%;
        color: white;
        text-align: center;
      }
    }
  }
  .outer_two {
    width: 100%;
    height: 50%;
    // border: 1px solid red;
    padding: 10px;
    > div {
      width: 100%;
      height: 18%;
      background-image: url("../../assets/beijinglan.png");
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;

      > div:nth-child(1) {
        width: 30%;
        color: white;
        font-size: .8vw;
        margin-left: 5px;
        text-align: center;
        // border: 1px solid red;
      }
      > div:nth-child(2) {
        width: 15%;
        padding: 0 0 0 20px;
      }
      > div:nth-child(3) {
        width: 30%;
        color: rgb(90, 217, 217);
        font-size: .8vw;
        // border: 1px solid red;

      }
      > div:nth-child(4) {
        width: 30%;
        color: red;
        font-size: .8vw;
        // border: 1px solid red;

      }
    }
  }
}
</style>